@use "../../assets/style/com.scss" as com;
@use "sass:list";
$colors: #ff5f57, #febc2e, #28c840;

.window-conntainer {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;

    .window-main {
        width: 88vw;
        position: relative;
        height: 90vh;
        background-color: rgb(180, 180, 180);
        overflow: hidden;
        border-radius: 18px;
        @include com.pad(0, 8px, 0, 0, $expand: true);
        @include com.shadow();

        .picture-room {
            height: 100%;
            height: inherit;
            @include com.pad(8px, 4px, 6px, 6px, true);

            .picture-wrapper {
                display: inline-flex;
                flex-wrap: wrap;
                align-content: space-around;
                justify-content: space-between;


                .picture-items {
                    width: 180px;
                    height: auto;
                    background-color: white;
                    margin: 6px;
                    overflow: hidden;
                    border: 1px solid rgb(214, 214, 214);
                    @include com.pad(4px, 4px, 5px, 5px, true);

                    b,
                    span {
                        font-size: 12.5px;
                        word-wrap: normal;
                        width: 100%;
                        white-space: nowrap;
                        overflow: hidden;
                        display: block;
                        margin-top: 4px;
                        text-overflow: ellipsis;
                    }

                    span {
                        font-size: 12px;
                    }

                    .picture {
                        border: 1px solid rgba(0, 0, 0, 0.068);
                        @include com.pad(22px, 22px, 22px, 22px, true);
                        background-image: url(../../assets/image/img_default.png);
                        position: relative;

                        &::after {
                            content: "";
                            position: absolute;
                            background-color: rgba(0, 0, 0, 0.315);
                            width: 100%;
                            height: 100%;
                            top: 0;
                            left: 0;
                        }
                    }
                }
            }
        }

        .window-header {
            user-select: none;
            width: 100%;
            height: 38px;
            background-color: white;
            @include com.pad(14px, 0, 14px, 14px, $expand: true);

            .dot-wrapper {
                max-width: 108px;
                height: auto;

                .window-dot-btn {
                    display: flex;
                    width: 14px;
                    align-items: center;
                    justify-content: center;
                    border-radius: 7px;
                    color: white;
                    height: 14px;
                    font-family: "黑体";
                    cursor: pointer;
                    content: none;

                    @for $i from 1 through list.length($colors) {
                        &-#{$i} {
                            background-color: list.nth($colors, $i);
                        }
                    }
                }
            }
        }
    }
}